<template>
	<!-- 暂时不可用 -->
	<view class="slider">
		<view class="min">{{ min }}</view>
		<view class="content">
			<view class="handler handler-min" :style="'transform: translateX(' + left + 'px);z-index:' + zIndexMin"
				@touchstart.stop.prevent.capture="bindtouchstartMin" @touchmove.stop.prevent.capture="bindtouchmoveMin"
				@touchend.stop.prevent.capture="bindtouchendMin">
				<view class="number">{{ minIndex }}</view>
			</view>
			<view class="handler handler-max" :style="'transform: translateX(' + right + 'px);z-index:' + zIndexMax"
				@touchstart.stop.prevent.capture="bindtouchstartMax" @touchmove.stop.prevent.capture="bindtouchmoveMax"
				@touchend.stop.prevent.capture="bindtouchendMax">
				<view class="number">{{ maxIndex }}</view>
			</view>
			<view class="line" id="line">
				<view class="active"></view>
			</view>
		</view>
		<view class="max">{{ max }}</view>
	</view>
</template>

<script>
	// components/slider/slider.js
	export default {
		data() {
			return {
				query: {},
				// selector对象
				line: {},
				// dom节点对象
				width: 0,
				// 总距离
				scale: 1,
				//比例
				left: 0,
				//左手柄定位
				right: 0,
				//右手柄定位
				minIndex: 0,
				//值
				maxIndex: 100,
				//值
				clientXMin: 0,
				clientXMax: 0,
				zIndexMin: 999,
				zIndexMax: 999
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			// 全局固定的最小值
			min: {
				type: Number,
				default: 0
			},
			// 全局固定的最大值
			max: {
				type: Number,
				default: 100
			},
			// 传参的最小值
			minValue: {
				type: Number,
				default: 0
			},
			// 传参的最大值
			maxValue: {
				type: Number,
				default: 100
			}
		},
		beforeMount: function() {
			// 在组件实例进入页面节点树时执行
		},
		destroyed: function() {
			// 在组件实例被从页面节点树移除时执行
		},
		onPageShow: function() {
			// 页面被展示
			console.log('header:show:');
			let query = this.createSelectorQuery();
			let line = query.select('#line');
			line.fields({
					size: true
				},
				(res) => {
					let width = Math.floor(res.width);
					let scale = width / (this.max - this.min);
					let left = (this.minValue - this.min) * scale;
					let right = (this.maxValue - this.max) * scale;
					this.query = query
					this.line = line
					this.width = width
					this.scale = scale
					this.left = left
					this.right = right
					this.minIndex = this.minValue
					this.maxIndex = this.maxValue
				}
			).exec();
		},
		onPageHide: function() {
			// 页面被隐藏
			console.log('header:hide:');
		},
		onPageResize: function() {
			// 页面尺寸变化
			console.log('header:resize:');
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			/** ============================================ 左 ==================================================== */
			bindtouchstartMin(ev) {
				// console.log('bindtouchstartMin:', ev, ev.changedTouches[0].clientX);
				this.zIndexMin = 1000
				this.zIndexMax = 999
			},

			bindtouchmoveMin(ev) {
				// console.log('bindtouchmoveMin:', ev, ev.changedTouches[0].clientX); 
				let clientX = ev.changedTouches[0].clientX
				console.log(clientX);
				if(clientX >= this.maxIndex * this.scale) {
				    clientX  = this.maxIndex * this.scale
				}else if(clientX <= this.min * this.scale){
				    clientX = this.min * this.scale
				}
				let minIndex = Math.floor(clientX/this.scale)
				this.clientXMin=clientX
				this.left=Math.floor(clientX)
				this.minIndex=minIndex
			},

			bindtouchendMin(ev) {
				// console.log('bindtouchendMin:', ev.changedTouches[0].clientX); 
				let clientX = ev.changedTouches[0].clientX
				this.left = Math.floor(this.clientXMin)
				this.minIndex = this.minIndex
			},

			/** ============================================ 右 ==================================================== */
			bindtouchstartMax(ev) {
				// console.log('bindtouchstartMax:', ev, ev.changedTouches[0].clientX);
				// this.zIndexMin: 999
				// this.zIndexMax: 1000
			},

			bindtouchmoveMax(ev) {
				console.log('bindtouchmoveMax:', ev, ev.changedTouches[0].clientX);
				let clientX = ev.changedTouches[0].clientX;
				console.log(clientX, Math.floor(clientX / this.scale), this.maxIndex * this.scale);

				if (clientX >= this.max * this.scale) {
					clientX = this.max * this.scale;
				} else if (clientX <= this.minIndex * this.scale) {
					clientX = this.minIndex * this.scale;
				}

				let maxIndex = Math.floor(clientX / this.scale); // console.log(maxIndex);

				this.clientXMax = clientX - this.width
				this.right = Math.floor(clientX - this.width)
				this.maxIndex = maxIndex
			},

			bindtouchendMax(ev) {
				console.log('bindtouchendMax:', ev.changedTouches[0].clientX);
				this.right = Math.floor(this.clientXMax)
				this.maxIndex = this.maxIndex
			}
		}
	};
</script>
<style>
	.slider {
		background: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 20rpx;
	}

	.slider .min {
		text-align: left;
		padding-right: 40rpx;
	}

	.slider .max {
		text-align: right;
		padding-left: 40rpx;
	}

	.slider .content {
		flex: 1;
		position: relative;
	}

	.slider .content .handler {
		position: absolute;
		top: -15px;
		width: 26px;
		height: 26px;
		border-width: 2px;
		border-style: solid;
		border-radius: 100%;
		transform: translateX(0);
	}

	.slider .content .handler-min {
		left: -15px;
		transform: translateX(0);
		background: rgba(255, 0, 0, 0.5);
		border-color: rgba(255, 0, 0, 0.5);
	}

	.slider .content .handler-max {
		right: -15px;
		transform: translateX(0);
		background: rgba(0, 0, 255, 0.5);
		border-color: rgba(0, 0, 255, 0.5);
	}

	.slider .content .handler-min .number,
	.slider .content .handler-max .number {
		width: 26px;
		position: absolute;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
	}

	.slider .content .handler-min .number {
		top: -40rpx;
	}

	.slider .content .handler-max .number {
		bottom: -40rpx;
	}

	.slider .content .line {
		background-color: #cccccc;
		height: 6rpx;
	}

	.slider .content .line .active {}
</style>
